<!--
 * @作者: 阳光信仰
 * @: 不学怎么会啊,坚持下去
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forever(Love(H&F))</title>
    <link rel="icon" href="images/222.ico">
    <script src="./av-min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #detail{
            width:85vw;
            height:90vh;
            /* margin:5vh auto; */
            background-color: gray;
            z-index: 2;
            display:none;
            position:absolute;
            left:7.5vw;
            top:5vh;
        }
        #content{
            width:100%;
            /* height:100vh; */
            /* background-color: green; */
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
        }
        #content div{
            width:45vw;
            height:200px;
            /* background-color: rgb(208, 125, 43); */
            background-image: url("images/letter.png");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin:2vh 2.5vw ;
            line-height: 280px;
            text-align: center;         
            font-size: 25px;
            overflow: hidden;
            color:rgb(163, 76, 91);
        }
        #detail .nicheng{
            height:30px;
            text-align: center;
            line-height: 30px;
            font-size: 23px;
            letter-spacing: 2px;
            margin:15px 0;
            font-weight:bold;
            color:pink;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        }
        #detail .img{
            height:250px;
            width:250px;
            border-radius: 0 0 34% 34%;
            /* background-image:url("images/2.png"); */
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 15px;
        }
        #detail .text{
            width:250px;
            max-height: 210px;
            margin-bottom: 10px;
            color:rgb(114, 162, 176);
            font-size: 13px;
            letter-spacing: 1px;
            line-height: 20px;
            text-indent: 28px;
            text-align: justify;
            overflow: scroll;
            user-select: none;
            overflow-x:hidden; 
        }
        
    </style>
</head>
<body>
   
    
    <div id="content">
       
    </div>
    <center>
    <a href="./index2.html" target="_blank">
        <button id="button_1">
            去留言页面~
        </button>
    </a></center>

    <div id="detail">
        <center>
        <div class="nicheng"></div>
        <div class="img"></div>
        <div class="text"></div>
        <audio controls src="http://leancloudsfile.ygxy.work/ce068f05a2cbf98291a1.mp3/0002%E5%B8%86%E5%B8%83%E5%B0%8F%E9%95%87%EF%BC%88Canvas%20Townlet%EF%BC%89-%E5%BD%93%E5%A4%9C%E7%A9%BA%E8%90%BD%E5%8E%BB%EF%BC%8C%E5%9F%8E%E5%B8%82%E7%BB%A7%E7%BB%AD%E5%89%8D%E8%A1%8C.mp3">
        </audio>
    </center>
    </div>
   

</body>
<script>
    var text= document.getElementsByClassName("text")[0]
    var nicheng=document.getElementsByClassName("nicheng")[0]
    var img=document.getElementsByClassName("img")[0]
    var mp=document.getElementsByTagName("audio")[0]
    var content =document.getElementById("content")
    var detail =document.getElementById("detail")
    var body = document.getElementsByTagName("html")[0]
    var APP_ID = 'avicCLPDpKt9h9KtuZEb4PUe-gzGzoHsz'
    var APP_KEY = '4LrHq1ihQMq7fcc8qjCR6IkO'
    var url='https://leancloudsjson.ygxy.work'
    AV.init({ appId: APP_ID, appKey: APP_KEY,serverURL:url })
    const { Query, User } = AV;
    const Todo = AV.Object.extend('myfile');
    const query = new Query('myfile');
    var liuyandata=[]
    var tmp
    query.equalTo('flag',1).descending('createdAt').find().then((result)=>{
        console.log(result)
        result.forEach(
            (value , index) => {
             liuyandata.push({"avatar":value.attributes.avatarurl,"audio":value.attributes.audiourl,"name":value.attributes.name,"message":value.attributes.message,"time":value.createdAt})
            })
           
    if(liuyandata.length>0){
       for(let i=0;i<liuyandata.length;i++)
        {
            let myli = document.createElement("div");
            myli.addEventListener("click",(e)=>{
                if(detail.style.display=="none"){
                e.stopPropagation();}
              tmp=i;
            //   content.style.display="none";
                content.style.opacity=0.3;
              detail.style.display="block";
               nicheng.innerText="To "+liuyandata[i].name;
               img.style.backgroundImage=`url('${liuyandata[i].avatar}')`;
               text.innerText=liuyandata[i].message
            
               mp.setAttribute('src',`${liuyandata[i].audio}`);
            })
            let mytime=liuyandata[i].time
            mytime=formattime(mytime)
            // mytime=mytime.getMonth()+1+"-"+mytime.getDate()+" "+mytime.getHours()+":"+mytime.getMinutes()
            myli.innerText=mytime
           
            content.appendChild(myli)
        }
    }})
    
    //  content.addEventListener("click",()=>{
    //     detail.style.display="none";
    //     content.style.opacity=1;
    //  })
    detail.addEventListener("click",(e)=>{
        if(detail.style.display=="block"){
            e.stopPropagation();
        }
    })
     body.addEventListener("click",(e)=>{
        if(detail.style.display=="block"){
            detail.style.display="none";
            content.style.opacity=1;
            e.stopPropagation();
        }
     })

     function formattime(date){
        if (date == "" || !date) {
                return "";
            }
            // var date = new Date(date);
            // var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            // var second = date.getSeconds();
            // second = second < 10 ? ('0' + second) : second;
            return  m + '-' + d + ' ' + h + ':' + minute ; 
     }
</script>
</html>